SpatialStream® Code Examples

Simple Mouse Over Identify With UTFGrid

This example shows how to add mouse over identify capability to the parcel layer in your application using
the UTFGrid functional component. When the mouse is hover above a parcel, an "mousemove"event is triggered
and the parcel which the mouse is hovering above will be highlighted as a canvas layer.


var utfGrid = new Dmp.Layer.utfGridCanvas(Dmp.Env.Connections["SS"].getBaseUrl() + 'GetUTFGrid.aspx?datasource=ss.base.utfgridparcel/utfgridparcel&z={
z
}&x={
x
}&y={
y
}&obsId=window&obsSuccessMethod={
cb
}&obsErrorMethod={
cb
}&output=json',
{

highlightMinZm: '17',
highlightMaxZm:'18',
clickHL: {

fillColor: 'rgba(255,0,255,0.3)',
fillTileSize: '4',
},
mouseOverHL: {

fillColor: 'rgba(0,0,255,0.3)',
fillTileSize: '4',
}
});
map.addLayer(utfGrid);

//UTFGrid Events
utfGrid.on('mouseover', function (e) {

//display APN
document.getElementById("displayAPN").innerHTML = "APN: " + e.data.APN + "<br/>House #: " +e.data.HOUSENUM;
});

utfGrid.on('mouseout', function(e){

});


Run Sample   Back To Index